<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue学习</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    
</head>
<body>
    <h1>component定义属性</h1>
    <div style="color:brown;size:50%">上节课学习的组件两种定义方式，这节课学习给组件设置属性，这里使用局部创建组件的方法</div>
    <hr>
    <div id="app">
        <!--1、直接将数据写在属性值上-->
       <boosli  here="河南省信阳市光山县"></boosli>
        <!--1、将属性值绑定到data上，这里使用到指令 v-on-->
       <boosli  :here="message"></boosli>
      
    </div>

        <script type="text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    message:"河南省信阳市光山县"
                },
                components:{
                    "boosli":{
                        template:`  <div style="color:blue;size:150%">boosli的籍贯是：{{here}}</div>`,
                        props:["here"]
                    }
                }
               
            })
        </script>
</body>
</html>